import stypes from "./reading.less"
import { useEffect } from "react"
import { useDispatch, useSelector, ArticleModelState, Link } from "umi"

export default function Reading() {
  let dispatch = useDispatch(),
    { recommedArticleList } = useSelector((state: { article: ArticleModelState }) => state.article)

  useEffect(() => {
    dispatch({
      type: "article/getArticleRecommend"
    })
  }, [])

  return (
    <div className={stypes.reading}>
      <div className={stypes.top}><span>推荐阅读</span></div>
      <div className={stypes.fot}>
        <div className={stypes.content}>
          <ul className={stypes.ul}>
            {recommedArticleList.map((item, index) => (
              <li key={index} style={{ opacity: 1, height: "36px", transform: "none" }}>
                <Link to="/">
                  <span>{item.title}</span> · <span>6个月前</span>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}